<%@include file="startUpIncludes.jsp" %>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>
            New View
        </title>
    <script type="text/javascript" >
    $(document).ready(function(){
    	$('#fromDomain').change(function() {
    	var selectedDomain = $('#fromDomain').val();
    	$.ajax({
          type: "POST",
    	  url: "/sales/s/getViewDomainCols",
    	  data: "selectedDomain="+selectedDomain,
    	  success: function(response){
    		var fields = response.split(',');
	   		$( ".valueLogic" ).each(function( index ) {
		   		  console.log( index + ": " + $(this).text() );
		   		  $(this).val('');
		   		});
	   		i=0;
	   		$(".fieldLogic").each(function( index ) {
		   		  $(this).html('');
		 	   		$('#sortable1').html('');
		 	   		$('#sortable2').html('');
	   		});
	   		$(".fieldLogic").each(function( index ) {
	   			if(i<=0){
	   			//alert("fieldLogic");
		   		  console.log( index + ": " + $(this).text() );
		   		  $(this).html('');
		 	   		$('#sortable1').html('');
		 	   		$('#sortable2').html('');
		   			jQuery.each(fields , function(index, value){
		   				var option = "<option value='" + value + "'>" + value + "</option>";
		   				var li = "<li class='viewDisplayField' id='" + value + "'>" + value + "</li>";
		   	   			$('.fieldLogic').append(option);
		   	   			$('#sortable1').append(li);
		   			});i++;
		   		}});
    	  },
    	  error: function(e){
    		  //alert('Error: ' + e);
    	  },
    	  context: document.body
    	}).done(function() {
    		//alert("ajax done");
    	});
    });
    });
    </script>
    <script type="text/javascript">
    $(document).ready(function(){
    	  $('.new-lead-view-form').submit(function(){
    		var obj = $('#sortable2 li');
    	    var fieldsArr = '';
    	    jQuery.each(obj, function(i, val) {
    	    	//alert("id: " + val.id);
    	        fieldsArr += val.id + '&';
    	      });
    	    $('.fieldsToDisplay').attr('value', fieldsArr);
    	    //alert("fieldsToDisplay: " + fieldsArr);
    	  });
    	});
    
    </script>
    </head>
    <body>
    <jsp:include page="header.jsp" >
		<jsp:param value="true" name="loggedIn"/>
	</jsp:include>
    <div class="wrap">
	<div class="fitBG">
        <div class="main">
		<%@include file="basicLeftMenu.jsp" %>
            <div class="content">
				<jsp:include page="tabs.jsp" >
					<jsp:param value="views" name="currentPage"/>
				</jsp:include>
                <div class="tab-content">
                <h3>New View</h3>
                <form class="new-lead-view-form" method="post" action="/sales/s/new-lead-view.html">
                <div class="btns">
                <input type="hidden" value="1" name="viewTypeId" />
                <input type="submit" value="Save" class="form-btn"/><a  href="/sales/s/views.html" class="form-btn">Cancel</a>
                </div>
                <div class="form-row">
                    <h4>Step 1. View Name:</h4>
                    <div class="input-col">
                    	<label>View Owner: </label><span>${userDetails.fName}</span>
                    </div>
                    <div class="input-col">
                        <label>View Name: </label>
                        <input type="text" class="TB" name="viewName"/>
                    </div>
                </div>
                <div class="form-row">
                    <h4>Step 2. View Basic Data:</h4>
                    <div class="input-col">
                        <label>View For: </label>
                        <select class="TB" name="fromDomain" id="fromDomain">
							<option value="Lead">Lead</option>
							<option value="Account">Account</option>
							<option value="Contact">Contact</option>
							<option value="Call">Call</option>
							<option value="Appointment">Appointment</option>
						</select>
					</div>
					<div class="input-col">
                        <label>Choose View Period:</label>
                        <select class="TB" name="reportPeriod" >
							<option value="daily">Daily</option>
							<option value="weekly">Weekly</option>
							<option value="monthly">Monthly</option>
							<option value="Other">Other</option>
						</select>
                    </div>
                </div>
                <div class="form-row">
                    <h4>Step 2. Filter Criteria:</h4>
                    <div class="row">
                    <span class="hd">Field: </span>
                    <span class="hd">Operator: </span>
                    <span class="hd">Value: </span>
                    </div>
                    <div class="row">
                        <select class="TB fieldLogic" name="fieldLogic1" id="fieldLogic1" >
                        <c:forEach items="${ viewFields }" var="viewField">
							<option value="${ viewField }">${ viewField }</option>
                        </c:forEach>
						</select>
                        <select class="TB" name="operator1" >
                        <c:forEach items="${ logicalOperators }" var="operator">
							<option value="${ operator.id }">${ operator.name }</option>
                        </c:forEach>
						</select>
                        <input type="text" class="TB valueLogic" name="value1"/>
                    </div>
                    <div class="row">
                        <select class="TB fieldLogic" name="fieldLogic2" id="fieldLogic2" >
                        <c:forEach items="${ viewFields }" var="viewField">
							<option value="${ viewField }">${ viewField }</option>
                        </c:forEach>
						</select>
                        <select class="TB" name="operator2" >                    
                        <c:forEach items="${ logicalOperators }" var="operator">
							<option value="${ operator.id }">${ operator.name }</option>
                        </c:forEach>
						</select>
                        <input type="text" class="TB valueLogic" name="value2"/>
                    </div>
                    <div class="row">
                        

                        <select class="TB fieldLogic" name="fieldLogic3" id="fieldLogic3" >
                        <c:forEach items="${ viewFields }" var="viewField">
							<option value="${ viewField }">${ viewField }</option>
                        </c:forEach>
						</select>
                        <select class="TB" name="operator3" >
                        <c:forEach items="${ logicalOperators }" var="operator">
							<option value="${ operator.id }">${ operator.name }</option>
                        </c:forEach>
						</select>
                        <input type="text" class="TB valueLogic" name="value3"/>
                    </div>
                </div>
                <div class="form-row">
                    <h4>Step 3. Choose Fields To Display</h4>
                    <%@include file="testMovingLists.jsp" %>
                    <input type="hidden" name="fieldsToDisplay" class="fieldsToDisplay"/>
                </div>
                <div class="btns">
                <input type="submit" value="Save" class="form-btn"/><a href="/sales/s/leads.html" class="form-btn">Cancel</a>
                </div>
                
                </form>
                </div>
            </div>
        </div>
        
    <%@include file="footer.jspf" %>
    </div>
    </div>

    </body>
</html>